<template>
  <div>
    <home-header></home-header>
    <home-swiper :list="swiperList"></home-swiper>
    <home-icons :list="iconList"></home-icons>
    <home-recommend :list="recommendList"></home-recommend>
    <home-weekend :list="weekendList"></home-weekend>
  </div>
</template>

<script>
import HomeHeader from '../components/home/Header.vue'
import HomeSwiper from '../components/home/Swiper.vue'
import HomeIcons from '../components/home/Icons.vue'
import HomeRecommend from '../components/home/Recommend.vue'
import HomeWeekend from '../components/home/Weekend.vue'

import axios from 'axios'
import { mapState } from 'vuex'
export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend
   },
   data() {
       return {
           swiperList: [],
           iconList: [],
           recommendList: [],
           weekendList: [],
           lastCity: ''
       }
   },
   computed: {
       ...mapState(['city'])
   },
   methods: {
       async getHomeInfo() {
           const { data: { data:res } } = await axios.get('/api/index.json?city='+ this.city)
           this.swiperList = res.swiperList
           this.iconList = res.iconList
           this.recommendList = res.recommendList
           this.weekendList = res.weekendList
       }
   },
   mounted() {
       this.lastCity = this.city
       this.getHomeInfo()
   },
   activated () {
       if(this.lastCity !== this.city) {
           this.lastCity = this.city
           this.getHomeInfo()
       }
   }
}
</script>

<style>

</style>
